<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>游记明细</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/travelContent.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="js/common.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css" />
    <script src="/js/plugins/dialog2/dialog.min.js"></script>

    <style >
        .on{color:#f00;}
        .fa-heart:before {
            content: "\f004";
            color: #ff171f;
        }
        .back{background-color: #87ff8d
        }


    </style>
    <script>
        $(function () {
            var params = getParams();
            var travelId=params.id;
            console.log(travelId);
            var userStr = sessionStorage.getItem('user');
            var user = JSON.parse(userStr);
            var userId=user.id;
            console.log(userId);
            var authorId;

            //判断用户是否已收藏该游记
            $.get("/users/travelRelations", {userId: userId, travelId: travelId}, function (data) {
                console.log(data);
                if (data) {
                    $("#collectBtn").addClass("fa-heart");
                }
            });

            $("#collectBtn").click(function () {
                $.ajax({
                    type: "PUT",
                    url: "/users/changeTravelCollections",
                    data: {userId: userId, travelId: travelId},
                    success: function(data){
                        console.log(data);
                        if (data) {
                            $("#collectBtn").addClass("fa-heart");
                        }else {
                            $("#collectBtn").removeClass("fa-heart");
                        }

                    }

                })

            });



           //判断有没有登陆
            if (user){
                userId=user.id
            }
            if(params.id){
                $.get("/travels",{id:params.id},function (data) {
                    authorId=data.author.id;
                    console.log(data);
                    $(".travels").renderValues(data,{
                        setPerson:function (item, value) {
                            var html="";
                            if(value==1){
                                html="一个人的旅行";
                            }else if(value==2){
                                html="和父母";
                            }else if(value==3){
                                html="和朋友";
                            }else if(value==4){
                                html="和同事";
                            }else if(value==5){
                                html="和爱人";
                            }else if(value==6){
                                html="和其他";
                            }
                            $(item).html(html);
                        },
                        setHref:function (item, value) {
                            var href =$(item).attr("href")+value;
                            $(item).attr("href",href);
                        }
                    })
                })

            }
            //看看有多少人点了赞
            $.get("/travels/"+params.id+"/likeCount",{userId:userId},function (data) {
                if (data.success){
                    $("#likeBtn").attr("data-key","")
                    $("#likeBtn").addClass("on");
                }
                $("#likeBtn b").html(data.obj)

            })
            //若已经点赞

            /*建立一个函数*/

            $("#likeBtn").click(function () {

                /*获取到id执行点击事件*/
                if (user){
                    if ($(this).attr("data-key")=="on") {
                        $(this).addClass("back");
                        var num = Number($(this).find("b").html()) + 1;

                        $.ajax({
                            type:"post",
                            url:"/travels/like/save",
                            data:{userId:userId,travelId:params.id},
                            success:function(data) {
                                if (data.success) {
                                    $(document).dialog({
                                        type: 'notice',
                                        infoText: '点赞成功',
                                        autoClose: 2500,
                                        position: 'bottom'  // center: 居中; bottom: 底部
                                    })
                                }
                            }
                        })
                        /*给变量赋值当.btn点击执行b标签内容=+1*/
                        $(this).find("b").html(num);
                        $(this).attr("data-key", "")
                       } else {
                        $(this).removeClass("on");
                        num = Number($(this).find("b").html()) - 1;
                        $.ajax({
                            type:"delete",
                            url:"/travels/like/delete",
                            data:{userId:userId,travelId:params.id},
                            success:function(data) {
                                if (data.success) {
                                    $(document).dialog({
                                        type : 'notice',
                                        infoText: '取消点赞成功',
                                        autoClose: 2500,
                                        position: 'bottom'  // center: 居中; bottom: 底部
                                    })
                                }
                            }
                        })
                        $(this).find("b").html(num);
                        $(this).attr("data-key", "on");
                    }
                 }
                 //没登陆不能点赞
                 else {
                    alert("请先登陆")
                    // window.location.href="login.html"
                }
            })

            //评论跳转
            $("#commentBtn").click(function () {
                location.href="/travelComment.html?id="+params.id;
            })

            //评论个数的显示
            //查询出该游记下所有的游记评论
            $.get("/travels/"+params.id+"/comments",function (data) {
                $("#commentBtn").html(data.total);
            });




            //点击关注

            var a = '已关注';
            var b = '关注';
            $.get("/users/relations", {userId: userId, authorId: authorId}, function (data) {
                console.log(data);
                if (data) {
                    $("#followBtn").html(a);
                }else {
                    $("#followBtn").html(b);
                }
            });

            $("#followBtn").click(function () {
                $.ajax({
                    type: "PUT",
                    url: "/users/changeFans",
                    data: {userId:userId,authorId:authorId},
                    success: function(){
                        $.get("/users/relations", {userId: userId, authorId: authorId}, function (data) {
                            if (data) {
                                $("#followBtn").html(a);
                            }else {
                                $("#followBtn").html(b);
                            }
                            $.get("/travels",{id:params.id},function (data) {
                                authorId=data.author.id;
                                console.log(data);
                                $(".travels").renderValues(data,{
                                    setPerson:function (item, value) {
                                        var html="";
                                        if(value==1){
                                            html="一个人的旅行";
                                        }else if(value==2){
                                            html="和父母";
                                        }else if(value==3){
                                            html="和朋友";
                                        }else if(value==4){
                                            html="和同事";
                                        }else if(value==5){
                                            html="和爱人";
                                        }else if(value==6){
                                            html="和其他";
                                        }
                                        $(item).html(html);
                                    },
                                    setHref:function (item, value) {
                                        var href =$(item).attr("href")+value;
                                        $(item).attr("href",href);
                                    }
                                })
                            })
                        });
                    }
                });



            });


        })


    </script>

</head>
<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
        </div>
    </div>
</div>

<div class="travels">
    <img  class="cover" render-src="coverUrl">
    <div class="container">
        <h6 class="title" render-html="title"></h6>
        <small>
            <span render-html="releaseTime"></span>
            浏览 <span render-html="browse"></span>
            回复 <span> 0</span>
        </small>
        <div class="row">
            <div class="col-2 img">
                <a href="userProfiles.html?id=" render-fun="setHref" render-key="author.id" >
                    <img  class="rounded-circle head-img" render-src="author.headImgUrl">
                   </a>
            </div>
            <div class="col-6 mine">
                <small>
                    <span render-html="author.nickName"></span>
                    <button class="btn" id="followBtn"><i class="fa fa-hand-o-right"> </i> 关注</button>


                    <br>
                    <span>0 </span>篇游记
                    粉丝<span render-html="author.fans">0 </span>
                </small>
            </div>
            <div class="attention col">
                <span class="addr" render-html="place.name">广州</span>
            </div>
        </div>
    </div>
    ,
    <div class="container">
        <fieldset>
            <legend>我的出行信息</legend>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-calendar"></i> 出发时间 <span render-html="travelTime"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-money"></i> 人均费用
                    <span render-html="perExpends"></span></div>
            </div>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-user-circle"></i> 人物
                    <span render-fun="setPerson" render-key="person"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-clock-o"></i> 出行天数
                    <span  render-html="days"></span>
                </div>
            </div>
        </fieldset>

        <div class="content" render-html="travelContent.content">

        </div>
    </div>

    <hr>

    <div class="container d-flex">
        <div class="p-2  flex-fill">
            <i class="fa fa-thumbs-o-up"  id="likeBtn" data-key="on"> <b id="likeCount"></b></i>
        </div>
        <div class="p-2  flex-fill"><i class="fa  fa-commenting-o"  id="commentBtn"> </i>
        </div>
        <div class="p-2  flex-fill"><i class="fa fa-heart-o" id="collectBtn"> </i>
        </div>

    </div>
</div>



</body>

</html>